<template>
  <div class="bc-electronic" v-if="!getIsPhone">
    <div id="wrap">

      <!-- 中间内容  背景图 按钮 -->
      <div id="content">
          <button class="btn btn1"></button>
          <button class="btn btn2"></button>
      </div>

      <!-- 左侧图片占位 -->
      <div class="left"></div>
      
      <!-- 右侧图片占位 -->
      <div class="right"></div>
    </div>
  </div>
  <div class="bc-electronic" v-else>
    <header-template-phone>
      <template v-slot:left>
        <header-menu></header-menu>
      </template>
      <template v-slot:center>
        电子
      </template>
    </header-template-phone>
  </div>
</template>

<script>
import HeaderTemplatePhone from '@/components/base/phone/header-template-phone/header-template-phone'
import HeaderMenu from '@/components/base/header-menu/header-menu'
import { mapGetters } from 'vuex';
export default {
  components: {
    HeaderTemplatePhone,
    HeaderMenu 
  },
  computed: {
    ...mapGetters('lottery', ['getIsPhone'])
  }
}
</script>

<style lang="stylus" scoped>
@media screen and (min-width 750px)
  .bc-electronic
    height 100%
    width 100%
    position absolute 
    top 0
    left 0
    right 0 
    bottom 0
    box-sizing border-box 
    padding-top 128px
    padding-bottom 60px 
    z-index 0
    #wrap
      width 100%;
      height 100%
      background-color #0557ab;
      position relative;
      overflow hidden;
      //中间主体内容
      #content
          position relative;
          width 1200px;
          height 100%
          margin 0 auto 
          margin-bottom 24px;
          background url('../../assets/imgs/centerbgc.png');
          .btn
              position absolute;
              bottom 83px;
              width 536px;
              height 180px;
              margin 0;
              padding 0;
              outline none;
              border none;
              border-radius 60px;
              cursor pointer;
              box-shadow -2px 2px 15px 0 #000;
          .btn1
              left 63px;
              background-image url('../../assets/imgs/btn1.png');
          .btn2
              left 640px;
              background-image url('../../assets/imgs/btn2.png')
      //左侧背景图
      .left
          position absolute;
          bottom -57px;
          left 0px;
          //占位代码
          // border 1px solid red;
          width 490px;
          height 535px;
          background url('../../assets/imgs/leftbgc.png');
          background-repeat no-repeat;
      //右侧背景图
      .right
          position absolute;
          width 310px;
          height 654px;
          right 0;
          bottom 0;
          background-image url('../../assets/imgs/rightbgc.png');

</style> 